import { View, StyleSheet, ImageBackground, Pressable, Text } from 'react-native';
import { Card } from './card';
import { px2dp } from '../../../utils/pixel-adapter';
import { getTheme } from '../../../theme';

const recommend = [
    {
        id: 1,
        cover: 'https://img2.baidu.com/it/u=3475686018,2839638455&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
        title: '今日热门华语速递',
        desc: '根据你的音乐口味推荐',
    },
    {
        id: 2,
        cover: 'https://img2.baidu.com/it/u=3475686018,2839638455&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
        title: '轻音乐工作室',
        desc: '让工作更专注',
    },
    {
        id: 3,
        cover: 'https://img2.baidu.com/it/u=3475686018,2839638455&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
        title: '怀旧经典',
        desc: '重温经典旋律',
    },
    {
        id: 4,
        cover: 'https://img2.baidu.com/it/u=3475686018,2839638455&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
        title: '新歌速递',
        desc: '最新流行音乐',
    },
];


export function Recommend(props) {
    return (
        <Card style={[props.style]} title="推荐歌单" rightDesc="更多">
            <View style={styles.recommendBox}>
                {
                    recommend.map((item) => {
                        return (
                            <View key={item.id} style={styles.recommendItem}>
                                <View style={styles.recommendItemImageRadius}>
                                    <ImageBackground
                                        style={styles.recommendItemImage}
                                        source={{ uri: item.cover }}
                                        >
                                        <Pressable style={({ pressed }) => {
                                            return [styles.recommendItemImagePlay, { opacity: pressed ? 0.8 : 1 }];
                                        }}>
                                            <Text style={[styles.playIcon, { fontFamily: 'iconfont' }]}>{'\ue61c'}</Text>
                                        </Pressable>
                                    </ImageBackground>
                                </View>
                                <View>
                                    <Text style={styles.title}>{item.title}</Text>
                                    <Text style={styles.desc}>{item.desc}</Text>
                                </View>
                            </View>
                        );
                    })
                }
            </View>
        </Card>
    )
}

const theme = getTheme();


const styles = StyleSheet.create({
    recommendBox: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        justifyContent: 'space-between',
    },
    recommendItem: {
        width: px2dp(160),
        marginBottom: px2dp(20),
    },
    recommendItemImageRadius: {
        width: px2dp(160),
        height: px2dp(160),
        borderRadius: px2dp(8),
        overflow: 'hidden',
    },
    recommendItemImage: {
        flex: 1,
    },
    recommendItemImagePlay: {
        width: px2dp(32),
        height: px2dp(32),
        borderRadius: px2dp(16),
        backgroundColor: theme.subcolor,
        position: 'absolute',
        bottom: px2dp(10),
        right: px2dp(10),
        justifyContent: 'center',
        alignItems: 'center',
    },
    playIcon: {
        fontSize: px2dp(20),
        color: theme.mainColor,
    },
    title: {
        fontSize: px2dp(14),
        color: '#fff',
        marginTop: px2dp(10),
    },
    desc: {
        fontSize: px2dp(12),
        color: 'rgb(161, 161, 170)',
        marginTop: px2dp(5),
    },
})